<template>
	<view>
		<canvas :style="{height:height+'px',width: width +'px'}" canvas-id="mycanvas" />
		<cover-view @tap="saveImg">
			<cover-image src="btn_img.png"></cover-image>
		</cover-view>
		<u-button text="下载图片" @click="saveImg"></u-button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imageUrl: "https://yhlyy.oss-cn-beijing.aliyuncs.com/0DB7B5B67B1F4267A4CF61A279364994img.png?Expires=4837160002&OSSAccessKeyId=LTAI4Fgsq7J3XQi7e2SRfzjJ&Signature=WAC5inpcv1Ttn%2F0otySpK6lzBVs%3D",
				codeUrl: "https://img0.baidu.com/it/u=310862756,2858003258&fm=253&fmt=auto&app=138&f=PNG?w=840&h=446",
				pageHeight: 600,
				width: 300,
				statusBarHeight: 100,
				height: 600,
				tips: {
					title1: "111",
					title2: "222",
					title3: "333",
				},
				localImageUrl: '',
				user: uni.getStorageSync('user'),
				info: {
					name: '',
					sn: null,
					zymc: '',
					bjmc: '',
					cousNameList: [],
					cousCnt: 0,
					cousVideoCnt: 0,
					learnedTime: 0,
					finishedLdsjCnt: 0,
					pyCnt: 0,
					pyTrName: [],
					date: ''
				},
				schoolInfo: {
					officialSeal: '',
					officialSealUrl: ''
				},
				text:{
					title:"劳动教育学情报告",
					lineUrl:"https://yhlyy.oss-cn-beijing.aliyuncs.com/35B220B2516F4A87BE659570EEA5B1BAline_my.png?Expires=4837241222&OSSAccessKeyId=LTAI4Fgsq7J3XQi7e2SRfzjJ&Signature=cegN%2B4ZiqPaFLYZKJp%2BYe%2Bpdqps%3D",
				},
				xnxq: {
					curxn: '',
					curxq: ''
				},
				imgUrl: 'https://yhlyy.oss-cn-beijing.aliyuncs.com/1810DF96C0654594839B149634C4633E%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20230516004551.png?Expires=4837769159&OSSAccessKeyId=LTAI4Fgsq7J3XQi7e2SRfzjJ&Signature=cNJP29vYI%2FGb3Fo3oNkkOxNNhHg%3D'
			}
		},

		onReady() {
			// 为了兼容不同机型页面大小，所以需要先获取到页面宽高
			this.getSysInfo()
		},
		methods: {
			getSysInfo() {
				/*获取手机宽高*/
				let that = this
				let imgUrl = this.imageUrl
				let qrcodeUrl = this.codeUrl
				uni.getSystemInfo({
					success(res) {
						console.log('屏幕宽度', res)
						that.width = res.windowWidth
						that.height = res.windowHeight
						// 获取图片信息生成canvas
						// 因为这里用的网络图片所以需要先获取本地网络图地址
						that.getImginfo([imgUrl, qrcodeUrl], 0);
					}
				})
			},
			getImginfo(urlArr, _type) {
				let that = this;
				uni.getImageInfo({
					src: urlArr[_type],
					success: function(res) {
						//res.path是网络图片的本地地址
						if (_type === 0) { //
							that.localImageUrl = res.path
							that.getImginfo(urlArr, 1)
						} else {
							//二维码
							that.localCodeUrl = res.path
							// 创建canvas图片
							that.createNewImg();
						}
					},
					fail: function(res) {
						//失败回调
						console.log('错误', _type, res)
					}
				});
			},
			createNewImg() {
				let that = this;
				let ctx = uni.createCanvasContext('mycanvas');
				// 绘制背景
				ctx.drawImage(this.localImageUrl, 0, 0, this.width, this.height - 44 - this.statusBarHeight);
				//绘制文本区域
				// let title1 = this.tips.title1;
				// let title2 = this.tips.title2;
				// let title3 = this.tips.title3;
				// ctx.lineJoin = "round";
				// ctx.lineWidth = 12;
				// ctx.setFillStyle('#FFFFFF')
				// ctx.setStrokeStyle('#FFFFFF')
				const textPosition = this.height - 44;
				ctx.strokeRect(this.remSize(24), textPosition, this.remSize(326), this.remSize(98));
				ctx.fillRect(this.remSize(24), textPosition, this.remSize(326), this.remSize(98));
				ctx.setFontSize(this.remSize(46));
				ctx.setFillStyle('#3362AD');
				ctx.fillText(this.text.title, this.remSize(44), textPosition + this.remSize(30));
				
				// 二维码区域y坐标
				const yPosition = this.height - 44 - this.statusBarHeight - this.remSize(98) - 100
				ctx.strokeRect(this.remSize(24), yPosition, this.remSize(326), this.remSize(98));
				ctx.fillRect(this.remSize(24), yPosition, this.remSize(326), this.remSize(98));

				// 绘制二维码
				const yPosition2 = yPosition + 4
				ctx.drawImage(this.localCodeUrl, this.remSize(28), yPosition2, this.remSize(90), this.remSize(90));

				//二维码区域文字
				let title1 = this.tips.title1;
				let title2 = this.tips.title2;
				let title3 = this.tips.title3;
				// 文字一
				ctx.setFontSize(this.remSize(14));
				ctx.setFillStyle('#333333');
				ctx.fillText(title1, this.remSize(128), yPosition + this.remSize(30));
				// 文字二三
				ctx.setFillStyle('#B8B8B8');
				ctx.setFontSize(this.remSize(12));
				ctx.fillText(title2, this.remSize(128), yPosition + this.remSize(62));
				ctx.fillText(title3, this.remSize(128), yPosition + this.remSize(85));
				// 绘制
				ctx.draw();

				//将生成好的图片保存到本地
				uni.canvasToTempFilePath({
					canvasId: 'mycanvas',
					success: (res) => {
						that.loadImagePath = res.tempFilePath
					},
					fail: (res) => {
						console.log(res);
					}
				});
			},


			remSize(num) {
				// 缩放比例
				let scalePage = uni.getSystemInfoSync().windowWidth / 375
				return num * scalePage
			},
			//点击保存到相册
			saveImg() {
				uni.saveImageToPhotosAlbum({
					filePath: this.loadImagePath,
					success(res) {
						uni.showToast({
							title: '已保存到相册',
							icon: 'success',
							duration: 3000
						})
					}
				})
			},



		}
	}
</script>

<style>

</style>
